<template>
<div>
<div class="container">
   <div class="relative-box relative-left"></div>
   <div class="">
    <div class="relative-box relative-center"></div>
    </div>
    </div>
        <div class="container-flex">
            <div class="relative-box"></div>
    </div>
</div>
</template>

 <script>
 export default{
     data(){
         return{};
     },
     methods:{},
 };
 </script>

    <style scoped>
        .container{
            position: relative;
          height:100px;
   
        }
        .relative-box{
            position: absolute;
          width: 100px;
            height: 100px;
            border: 1px solid black;
            background: red;
        }
         .relative-left{
        left:100px;
        }
           .relative-center{
             left:50%;
             margin-left: -50px;
        }
        .container-flex{
            display: flex;
            justify-content: center;
            height: 100px;
        }
    </style>